<template>
  <div class="layout-wrapper">
    <a-layout class="layout-trigger">
      <a-layout-sider class="left-slider" :trigger="null">
        <div class="logo">
          <img src="../../static/images/logo.png" alt>
        </div>
        <Menu/>
      </a-layout-sider>
      <a-layout class="right-layout">
        <a-layout-header class="header">
          <div class="right-user-operate">
            <a-dropdown placement="bottomRight">
              <a class="ant-dropdown-link">
                欢迎你，{{username}}
                <a-icon type="down"/>
              </a>
              <a-menu slot="overlay" class="user-menu">
                <a-menu-item>
                  <a>
                    <a-icon type="user"/>个人中心
                  </a>
                </a-menu-item>
                <a-menu-item>
                  <a @click="logout()">
                    <a-icon type="logout"/>退出登录
                  </a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </div>
        </a-layout-header>
        <a-layout-content class="container">
          <a-breadcrumb class="breadcrumb-wrap" separator="  ">
            <a-breadcrumb-item
              v-for="item in $route.matched"
              :key="item.path"
            >{{item.meta.rootMenu}}{{item.meta.title}}</a-breadcrumb-item>
          </a-breadcrumb>
          <div class="content-wrap" id="content">
            <router-view/>
          </div>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import { logout } from '../store/action.js'
export default {
  components: {
    Menu:()=> import('./Menu.vue')
  },
  data() {
    return {
      username: ''
    }
  },
  created() {
    this.username = localStorage.getItem('username')
  },
  methods: {
    logout() {
      logout().then(res => {
        this.$message.success(res.data.message)
        this.$router.push('/login')
        localStorage.removeItem('token')
      })
    }
  }
}
</script>

<style lang="scss">
.user-menu {
  .anticon {
    margin-right: 5px;
  }
}
.layout-wrapper {
  height: 100%;
  .layout-trigger {
    height: 100%;
    .left-slider {
      .logo {
        position: relative;
        height: 64px;
        background: #fff;
        img {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          display: inline-block;
          width: 80%;
          vertical-align: middle;
        }
      }
    }
    .right-layout {
      .header {
        background: #fff;
        padding: 0;
        .right-user-operate {
          float: right;
          margin-right: 40px;
          .ant-dropdown-link {
            color: #101010;
            font-size: 16px;
          }
        }
      }
      .container {
        position: relative;
        margin: 24px 16px;
        padding: 24px;
        background: #fff;
        min-height: auto;
        margin-top: 60px;
        .breadcrumb-wrap {
          position: absolute;
          top: -40px;
          left: 5px;
          z-index: 2;
        }
      }
    }
  }
}
</style>
